<template>
  <draggable class="editable-textarea" :list="list" ref="textarea" @end="clearAndRepopulateTextarea">
    <div
      class="editable-content"
      v-for="(user, index) in list"
      :key="index"
  	  :options="{handle: '.handle', animation: 1200}"
      >
      <div
        :ref="'editableContent-'+index"
        :contenteditable="isEditable(user)"
        @blur="updateContent(user, $event.target)"
        :class="{ 'not-editable': !isEditable(user) }"
        :style="!isEditable(user) ? 'background-color: #9c9ea5;color:white;display: inline;font-size: 16px;user-select: none;' : 'font-size: 16px'">
        {{getContent(user)}}
        <div v-if="!isEditable(user)" class="nickname" style="display: inline;font-size:10px;background-color: #9c9ea5;color:white;">({{ user.nickName }})</div>
      </div>
    </div>
  </draggable>

<!--  <div class="editable-textarea" ref="textarea">
     <div
         class="editable-content"
         v-for="(user, index) in list"
         :key="index"
         draggable="true"
         @dragstart="handleDragStart(index)"
         @dragover="handleDragOver"
         @drop="handleDrop(index)"
         :style="isEditable(user) ? 'min-height:100px' : ''">
          <div
            :ref="'editableContent-'+index"
            :contenteditable="isEditable(user)"
            @blur="updateContent(user, $event.target)"
            :class="{ 'not-editable': !isEditable(user) }"
            :style="!isEditable(user) ? 'background-color: #9c9ea5;color:white;display: inline;font-size: 16px;user-select: none;' : 'font-size: 16px'">
            {{getContent(user)}}
            <div v-if="!isEditable(user)" class="nickname" style="display: inline;font-size:10px;background-color: #9c9ea5;color:white;">({{ user.nickName }})</div>
          </div>
    </div>
  </div> -->
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable,
  },
  name: "DragTextarea",
  props: {
    /* 编辑器的内容 */
    list: {
      type: Array,
      default: [],
    },
    type: {
      type: String,
      default: "lc",
    },
  },
  watch:{
    list(val){
      this.list = val;
    }
  },

  methods: {
    getContent(item){
      let content;
      switch(this.type){
        case "lc":
          content = item.lc;
          break;
        case "fz":
          content = item.fz;
          break;
        case "lj":
          content = item.lj;
          break;
        case "qg":
          content = item.qg;
          break;
        case "ss":
          content = item.ss;
          break;
        case "jj":
          content = item.jj;
          break;
        case "na":
          content = item.na;
          break;
        case "ha":
          content = item.ha;
          break;
        case "ax":
          content = item.ax;
          break;
        case "yc":
          content = item.yc;
          break;
        case "dh":
          content = item.dh;
          break;
        case "kf":
          content = item.kf;
          break;
        case "ts":
          content = item.ts;
          break;
      }
      return content;
    },
    isEditable(user) {
      return user.userId.toString() === this.$store.getters.userId;
    },
    updateContent(user, dom) {
      let content = dom.innerText;
      //dom.innerText = "";
      switch(this.type){
        case "lc":
          user.lc = content;
          break;
        case "fz":
          user.fz = content;
          break;
        case "lj":
          user.lj = content;
          break;
        case "qg":
          user.qg = content;
          break;
        case "ss":
          user.ss = content;
          break;
        case "jj":
          user.jj = content;
          break;
        case "na":
          user.na = content;
          break;
        case "ha":
          user.ha = content;
          break;
        case "ax":
          user.ax = content;
          break;
        case "yc":
          user.yc = content;
          break;
        case "dh":
          user.dh = content;
          break;
        case "kf":
          user.kf = content;
          break;
        case "ts":
          user.ts = content;
          break;
      }
    },
/*    handleDragStart(index) {
      // 将拖拽的数据保存在DataTransfer对象中
      event.dataTransfer.setData('text/plain', index.toString());
    },
    handleDragOver(event) {
      event.preventDefault();
    },
    handleDrop(dropIndex) {
      const dragIndex = parseInt(event.dataTransfer.getData('text/plain'));
      const draggedUser = this.list[dragIndex];
      const dropUser = this.list[dropIndex];

      // 在数组中交换拖拽元素和放置元素的位置
      this.list.splice(dragIndex, 1);
      this.list.splice(dropIndex, 0, draggedUser);

      //拖拽完成后，重新排列整个列表
      this.clearAndRepopulateTextarea();

    },*/

    clearAndRepopulateTextarea() {
      debugger;
        let textarea = this.$refs.textarea;
        textarea.innerHTML = ''; // 清空 textarea 元素的内容

        // 重新添加元素到 textarea
        for(var index = 0 ; index < this.list.length ; index++ ){
          let user = this.list[index];
          const editableContent = document.createElement('div');
          editableContent.setAttribute('class', 'editable-content');

          const editableDiv = document.createElement('div');
          editableDiv.setAttribute('ref', 'editableContent-' + index);
          editableDiv.setAttribute('contenteditable', this.isEditable(user));
          editableDiv.setAttribute('class', { 'not-editable': !this.isEditable(user) });
          editableDiv.setAttribute('style', !this.isEditable(user) ? 'background-color: #9c9ea5;color:white;display: inline;font-size: 16px;user-select: none;' : 'font-size: 16px;');
          editableDiv.addEventListener('input', (event) => this.updateContent(user, event.target));

          debugger;
          const content = document.createTextNode(this.getContent(user));
          editableDiv.appendChild(content);

          if (!this.isEditable(user)) {
            const nickname = document.createElement('div');
            nickname.setAttribute('class', 'nickname');
            nickname.setAttribute('style','display: inline;font-size:10px;background-color: #9c9ea5;color:white;');
            const nicknameContent = document.createTextNode('(' + user.nickName + ')');
            nickname.appendChild(nicknameContent);
            editableDiv.appendChild(nickname);
          }

          editableContent.appendChild(editableDiv);
          textarea.appendChild(editableContent);
        }
        /* this.list.forEach((user, index) => {

          const editableContent = document.createElement('div');
          editableContent.setAttribute('class', 'editable-content');

          const editableDiv = document.createElement('div');
          editableDiv.setAttribute('ref', 'editableContent-' + index);
          editableDiv.setAttribute('contenteditable', this.isEditable(user));
          editableDiv.setAttribute('class', { 'not-editable': !this.isEditable(user) });
          editableDiv.setAttribute('style', !this.isEditable(user) ? 'background-color: #9c9ea5;color:white;display: inline;font-size: 16px;user-select: none;' : 'font-size: 16px;');
          editableDiv.addEventListener('input', (event) => this.updateContent(user, event.target));

          debugger;
          const content = document.createTextNode(this.getContent(user));
          editableDiv.appendChild(content);

          if (!this.isEditable(user)) {
            const nickname = document.createElement('div');
            nickname.setAttribute('class', 'nickname');
            nickname.setAttribute('style','display: inline;font-size:10px;background-color: #9c9ea5;color:white;');
            const nicknameContent = document.createTextNode('(' + user.nickName + ')');
            nickname.appendChild(nicknameContent);
            editableDiv.appendChild(nickname);
          }

          editableContent.appendChild(editableDiv);
          textarea.appendChild(editableContent);
        }); */

       //this.$forceUpdate(); // 手动触发重新渲染
      }
  },
};
</script>

<style>
 .not-editable {

 }
 .nickname{
 }
 .editable-textarea {
   border: 1px solid #dcdfe6;
   border-radius: 4px;
   padding: 10px;
   line-height: 1.5;
   min-height: 180px;
   max-height: 20em; /* 设置默认行宽为4行 */
   outline: none;
   white-space: pre-line;
   word-wrap: break-word;
   /*word-break:keep-all;|*/
   resize: both;
   overflow: auto;
 }

 .editable-textarea:focus {
   border-color: #409EFF;
 }
</style>
